<template>
  <div id="chinaMap" ref="charts"></div>
</template>

<script>
import { getMap } from './help/maputils.js'
import mixins from './mixins'
import './help/china.js'

export default {
  mixins: [mixins],
  props: {
    // 主题切换
    pageConfig: Object,
    scatterData: {
      type: Array,
      require: false,
      default: () => []
    },
    visualColor: {
      type: Array,
      require: false,
      default: () => ['#e0ffff', '#006edd']
    },
    // 图例缩放
    zoom: {
      type: Number,
      require: false,
      default: 1
    },
    visualText: {
      type: Array,
      require: false,
      default: () => ['高', '低']
    },
    cityMapName: {
      type: String,
      require: false,
      default: '中国'
    }
  },
  data() {
    return {
      chart: null,
      citylist: [{ 中国: '401200965' }],
      lastCity: {},
      mapName: 'china',
      mode: '2',
      option: {}
    }
  },
  mounted() {
    // this.init()
    this.initChart()
  },
  beforeDestroy() {
    this.chart && this.chart.dispose()
  },
  methods: {
    
    initCharts() {
      // 地图背景图
      // let mapbg = require("../../../../../assets/home_page/map-bg.png")
      this.charts = this.$echarts.init(this.$refs["charts"]);

      const option = {
        // 背景颜色
        backgroundColor: 'transparent',
        // layoutCenter: ['50%', '50%'], //位置
        // layoutSize: '100%', //大小
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          // padding: [0, 10, 8, 10],
          roam: true, // 是否开启缩放和平移
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          backgroundColor: "#fff",
          //解决浮窗被遮挡
          confine: true,
          textStyle: {
            color: "#fff",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 50,
          className: 'custom-tooltip-box',
          formatter: (params) => {
            // font-family: YouSheBiaoTiHei;
            var htmlStr = `
            <div class='custom-tooltip-style1'>
              <div class='content'>
              <p style="line-height: 30px; height: 30px; font-weight: 600;
              font-style: italic; font-size: 20px; color: #FFFFFF;"
              >${params.name}</p>
              
              <div style="margin-top: 0px; margin-left: 10px">
                <div class="text-box">
                  <span style="line-height: 30px; font-size: 18px; color: #CBDDF2;">机器人</span>
                  <span style="line-height: 30px; font-size: 18px; font-weight: 600; font-style: italic; color: #D5D9FF;"> ${params.data.info.robotNum}个</span>
                </div>
                <div class="text-box">
                  <span style="line-height: 30px; font-size: 18px; color: #CBDDF2;">工单处理</span>
                  <span style="line-height: 30px; font-size: 18px; font-weight: 600; font-style: italic;  color: #D5D9FF;"> ${params.data.info.workOrderNum}条</span>
                </div>
                <div class="text-box">
                  <span style="line-height: 30px; font-size: 18px; color: #CBDDF2;">通过率</span>
                  <span style="line-height: 30px; font-size: 18px; font-weight: 600; font-style: italic; color: #8FE29A;"> ${params.data.info.passingRate}%</span>
                </div>  
              </div>
              </div>
            </div>
            `
            return htmlStr
          },
        },
        // 地图配置文字显示
        geo: [
          {
            map: "china",
            layoutCenter: ['50%', '50%'],//位置
            layoutSize: '100%',//大小
            show: true,
            roam: false,
            zoom: 1.4,
            aspectScale: 1,
            regions: [],
            label: {
              show: true,
              color: "#fff",
              textStyle: {
                color: "#fff",
              },
              normal: {
                show: true,
                textStyle: {
                  color: '#F0F0F0'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#F0F0F0'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                  },],
                  global: true, // 缺省为 false
                },
                borderColor: "#84E0F6",
                borderWidth: 1,
                shadowColor: "#8cd3ef",
                shadowOffsetY: 4,
                shadowBlur: 120,
                areaColor: "#0c1c44",
              },
              emphasis: {
                // areaColor: "rgba(0,254,233,0.6)",
                areaColor: "#BA5F26", // 最上层地图高亮设置，
                borderWidth: 2,
                borderColor: "#F9D323",
              },
              regions: [{
                name: '南海诸岛',
                itemStyle: {
                  normal: {
                    opacity: 0,
                    label: {
                      show: false
                    }
                  }
                }
              }]
            }
          },
          {
            type: "map",
            map: this.mapName,
            zlevel: -1,
            aspectScale: 1,
            zoom: 1.4,
            layoutCenter: ["50%", "51%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor:"rgba(17, 149, 216,0.6)",
                borderColor: "rgba(58,149,253,0.8)",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          }, 
          {
            type: "map",
            map: this.mapName,
            zlevel: -2,
            aspectScale: 1,
            zoom: 1.4,
            layoutCenter: ["50%", "52%"],
            layoutSize: "100%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(57, 132, 188,0.4)",
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent",
              },
            },
          },
        ],
        series: [
          {
            type: "map",
            roam: true, // 是否开启缩放和平移
            zoom: 1.3,
            geoIndex: 0,
            label: {
              // 通常状态下的样式
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              // 鼠标放上去的样式
              emphasis: {
                textStyle: {
                  color: "#640000",
                },
              },
              formatter: (params) => {
                console.log(222, params)
              }
            },
            data: this.echartsData,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            // 定位角标
            symbol: "pin",
            legendHoverLink: true,
            symbolSize: [18, 24],
            tooltip: {
              show: true,
              trigger: "item",
              alwaysShowContent: false,
              backgroundColor: "rgba(0, 0, 0, 0.7)",
              padding: [0, 10, 8, 10],
              roam: true,
              hideDelay: 100,
              triggerOn: "mousemove",
              enterable: true,
              borderColor: "rgba(0, 0, 0, 0.7)",
              // 阴影，值越大阴影亮度越高
              // shadowBlur: 8,
              // shadowColor: "#00FCFF",
              textStyle: {
                color: "#fff",
                fontSize: "12",
                width: 20,
                height: 30,
                overflow: "break",
              },
              showDelay: 100,
            },
            // 这里渲染标志里的内容以及样式
            // label: {
            //   show: true,
            //   formatter(value) {
            //     return value.data.value[2];
            //   },
            //   color: "#fff",
            // },
            // // 标志的样式
            // itemStyle: {
            //   normal: {
            //     color: "#2c72db",
            //   },
            // },
            label: {
              normal: {
                show: true,
                formatter(value) {
                  return value.data.value;
                },
                color: "#333",
                backgroundColor: "rgba(0, 0, 0, 0.8)",
                padding: [10, 20, 10, 20],
                fontSize: "14",
                show: false,
                borderRadius: 5,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#26D17B",
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            // 至于如何展示，完全是靠上面的formatter来自己定义的
            // data: [
            //   { name: '深圳', value: [114.02, 22.6, '深圳'] },
            //   { name: '大连', value: [121.61, 38.91, '大连'] },
            //   { name: '青岛', value: [120.4, 36.09, '青岛'] },
            // ],
            data: this.scatterData,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
        ],
        // visualMap: {
        //   show: false,
        // },
        graphic: { // 左上角操作按钮
          type: "text",
          x: 25,
          y: 25,
          style: {
            text: "返回",
            fill: "#333",
            font: 'bolder 1em "Microsoft YaHei", sans-serif'
          },
          onclick: () => {
            // 利用函数的作用域，可以直接拿上面的name来用
            if (this.citylist.length < 2) return;
            this.lastCity = this.citylist[this.citylist.length - 2];
            const name = Object.keys(this.lastCity)[0];
            const [grahpName, graphJson] = getMap(name);
            // 删除最后一个元素
            this.citylist.pop();
            // 很多操作重复了，可以将公共部分抽离出来
            option.geo.map = grahpName;
            this.$echarts.registerMap(grahpName, graphJson);
            this.charts.setOption(option, true);
          },
        },
      };

      // 切换图层
      // let option = this.pageConfig.isDarkTheme ? optionDark : optionLight
      
      // 获取地图参数 
      const [mapName, mapJson] = getMap(this.cityMapName);
      option.geo.map = mapName;
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      this.$echarts.registerMap(mapName, mapJson);

      this.charts.setOption(option);

      // this.charts.off();
      this.charts.on("click", (dom) => {
        console.log("dom==", dom)
        // 阻止散点图点击事件
        if (dom.seriesType === "scatter") return;
        // 暴露点击事件
        const { name: cityname, data } = dom;
        const name = cityname ? cityname : Object.keys(this.lastCity)[0];
        let code = "";
        if (dom.componentType === "series") {
          code = data?.areaUniCode ? data?.areaUniCode : this.lastCity[name];
        } else {
          code = this.lastCity[name];
        }
        const [mapName, mapJson] = getMap(name);
        if (mapJson) {
          // 是否暴露点击事件
          if (dom.componentType === "series") {
            this.citylist.push({ [name]: code });
          }
          this.mapClick(code, name);
        }
        if (!mapJson) return;

        // 渲染省份、地市的 map
        // option.geo.map = mapName;
        // // 设置为undefined，可以保证地图切换时总是居中
        // option.geo.center = undefined;
        // this.$echarts.registerMap(mapName, mapJson);
        // this.charts.setOption(option);
      });

      //设置鼠标移入指定省份颜色不变的效果
      // this.charts.on("mouseover", function (params){
      //   console.log("params==", params)
      //   if(params.data.value != undefined){
      //       if(params.data.value==0){
      //         myChart.dispatchAction({
      //             type: 'downplay'
      //         });
      //         }
      //   }
      // });

      this.$refs["charts"].oncontextmenu = () => false;

    },
    // 向父组件提供点击事件，并提供点击省份的code和name
    mapClick(code, name) {
      this.$emit("mapClick", { code, name });
    },
    // // 指定高亮区域
    mapActive(name) {
      console.log("province==", name)
      this.charts && this.charts.dispatchAction({
        type: "select",
        // geo 中名称
        name
      })
    }
    
  }
}
</script>
<style lang="scss" scoped>
::v-deep(.custom-tooltip-box) {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;

  .custom-tooltip-style {
    margin: 0;
    padding: 0;
    color: #ffffff;

    .content {
      background-color: transparent !important;
      padding: 12px 20px;
      height: 160px;
      width: 200px;
      // background-image: url("../../../../../assets/home_page/tooltip.png");
      background-size: 100% 100%;
    }
  }

  // 切换图层
  .custom-tooltip-style1 {
    margin: 0;
    padding: 0;
    color: #ffffff;

    .content {
      background-color: transparent !important;
      padding: 0px 20px 0 2px;
      height: 160px;
      // width: 240px;
      // background-image: url("../../../../../assets/home_page/tooltip-black.png");
      background-size: 100% 100%;

      .text-box {
        height: 33px;
        margin: 7px 0 0 10px;
      }
    }
  }
}
</style>
